<template>
  <div>
    <van-search
      v-model="searchConsumer"
      placeholder="搜索顾客"
      input-align="center"
      @clear="onClear"
    />
    <div
      class="m-current"
    >
      <van-row>
        <van-col span="8">顾客</van-col>
        <van-col span="8">当前管家</van-col>
      </van-row>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div
        v-for="(item, index) in lstClerk"
        :key="index"
        class="m-cost"
      >
        <van-row style="height: 36px;">
          <van-col span="8"> {{ item.cname }}</van-col>
          <van-col span="8"> {{ item.kname }}</van-col>
          <van-col span="8">
            <van-button type="info" size="small" block @click="show=true;currentIndex=index;">重新分配</van-button>
          </van-col>
        </van-row>
      </div>
    </van-list>
    <van-popup
      v-model="show"
      :style="{ height: '70%', width: '100%' }"
    >
      <van-picker
        :show-toolbar="true"
        :columns="lstKeeper"
        @cancel="show=false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import { mapGetters } from 'vuex'
import { getShopClerks, setClerkKeeper } from '@/api/txs'
import { getAdminsBySid } from '@/api/admin'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import Toast from 'vant/lib/toast'
import 'vant/lib/toast/style'
import Picker from 'vant/lib/picker'
import 'vant/lib/picker/style'
import Search from 'vant/lib/search'
import 'vant/lib/search/style'

export default {
  components: {
    [Search.name]: Search,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      searchConsumer: '',
      currentIndex: 0,
      show: false,
      lstClerk: [],
      lstClerkCopy: [],
      lstKeeper: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  watch: {
    searchConsumer(newValue, oldValue) {
      this.lstClerk = this.lstClerkCopy.filter(c => c.cname.includes(newValue))
    }
  },
  created () {
    getAdminsBySid(this.openId).then(res => {
      this.lstKeeper = res.data.data
      this.lstKeeper = this.lstKeeper.map(k => {
        return { id: k.id, text: k.nickName }
      })
      this.lstKeeper.unshift({ id: 0, text: '公海' })
    })
  },
  methods: {
    onClear () {
      this.searchConsumer = ''
    },
    onLoad () {
      this.loading = false
      getShopClerks(this.openId).then(res => {
        this.lstClerk = res.data.data
        this.lstClerkCopy = res.data.data
        this.finished = true
      })
    },
    onConfirm(value, index) {
      const consumer = this.lstClerk[this.currentIndex]
      if (consumer.kid !== value.id) {
        consumer.kid = value.id
        if (index !== 0) {
          consumer.kname = value.text
        } else {
          consumer.kname = undefined
        }

        const dataInfo = new FormData()
        dataInfo.append('cid', consumer.id)
        dataInfo.append('kid', value.id)
        dataInfo.append('kname', value.text)
        setClerkKeeper(dataInfo)
      }
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.m-current{
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 2px;
}
</style>
